<!DOCTYPE html>
<HTML>
    <HEAD>
        <META charset="utf-8"></META>
        <title>主页</title>
        <link rel="stylesheet" href="css/base.css?t=2">

        <style>
           #modulesDiv{
                padding: 10px;
                user-select: none;
            }

            #modulesDiv>div{
                display: inline-block;
                padding:50px;
                border-radius: 10px;
                box-shadow: 0 0 5px yellow;
                cursor: pointer;
                margin: 10px;
            }
            #modulesDiv>div:hover{
                opacity: 0.8;
            }
            #modulesDiv>div:active{
                opacity: 0.95;
                box-shadow: 0 0 10px lightpink;
            }
        </style>
    </HEAD>
    <body>
        <div class="flex-row flex-row-single flex-center">
            <h2 style="color:green">智慧养老室监控平台-实时数据</h2>
        </div>
        <hr>
        <div class="flex-row flex-center" id="modulesDiv">
            <div>
                <b>温度</b>
                <i id="tempId">10</i>
                <br>
                <b>状态</b>
                <i id="tempStatusId">close</i>
            </div>
            <div>
                <b>湿度</b>
                <i id="humiId">20</i>
                <br>
                <b>状态</b>
                <i id="humiStatusId">close</i>
            </div>
            <div>
                <b>光线</b>
                <i id="lightId">30</i>
                <br>
                <b>状态</b>
                <i id="lightStatusId">open</i>
            </div>
        </div>
        <hr>
        <div class="flex-row flex-center">
            <h3 >指令管理</h3>
        </div>
        <div class="flex-row flex-center">
            <form action="">
                <select>
                    <option value="1">1</option>
                    <option value="1">2</option>
                </select>
                <input>
                <button>发送指令</button>
            </form>
        </div>
        

        <script>
            function loaddata(){
                fetch("/cgi-bin/data?module="+localStorage.current_module).then(resp=>resp.json()).then(data=>{
                    // {code:0, data: {temp:, humi: , light, ...}}
                    if(data.code == 0){
                        tempId.innerText = data.data.temp;
                        tempStatusId.innerText = data.data.temp_status;
                        if(data.data.temp_status == "open"){
                            tempId.parentElement.className = "bg_red";
                        }else{
                            tempId.parentElement.className ="bg_normal";
                        }

                        humiId.innerText = data.data.humi;
                        humiStatusId.innerText = data.data.humi_status;

                        if(data.data.humi_status == "open"){
                            humiId.parentElement.className = "bg_red";
                        }else{
                            humiId.parentElement.className ="bg_normal";
                        }

                        lightId.innerText = data.data.light;
                        lightStatusId.innerText = data.data.light_status;

                        if(data.data.light_status == "open"){
                            lightId.parentElement.className = "bg_red";
                        }else{
                            lightId.parentElement.className ="bg_normal";
                        }

                    }
                    
                })
            }

            setInterval(loaddata, 1000);

            // 当页面加载完成后
            window.onload = function(){
                loaddata();
            }

        </script>
    </body>
</HTML>